import { getUserInfo } from '@/api'
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { Card, Avatar, List } from 'antd'
import { Link, useLocation } from 'react-router-dom'
import { fmtDate } from '@/utils/filter.js'

const User = () => {
    let { id } = useParams()
    const [detail, setDetail] = useState({})
    useEffect(() => {
        getData(id)
    }, [id])
    const { pathname } = useLocation();
    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname])
    return (
        <>
            <Card title={(<><Avatar src={detail.avatar_url} style={{ marginRight: '10px' }} />{detail.loginname}</>)}>
                <p>昵称：{detail.loginname}</p>
                <p>github昵称：{detail.githubUsername}</p>
                <List
                    header={<div>最近参与的话题</div>}
                    dataSource={detail.recent_topics}
                    renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Avatar src={detail.avatar_url} />}
                                title={<Link to={{ pathname: '/detail/' + item.id }}> {item.title}</Link>}
                                description={fmtDate(item.last_reply_at, 'yyyy-MM-DD hh:mm:ss')}
                            />
                        </List.Item>
                    )}
                />
                <List
                    header={<div>最近创建的话题</div>}
                    dataSource={detail.recent_replies}
                    renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Avatar src={detail.avatar_url} />}
                                title={<Link to={{ pathname: '/detail/' + item.id }}> {item.title}</Link>}
                                description={fmtDate(item.last_reply_at, 'yyyy-MM-DD hh:mm:ss')}
                            />
                        </List.Item>
                    )}
                />
            </Card>
        </>
    );
    function getData(id) {
        getUserInfo(id).then((res) => {
            console.log(res);
            setDetail(res.data)
        })
    }
}

export default User;